<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<c:if test="${empty sessionScope.user}">
    <c:redirect url="/login"/>
</c:if>
<c:if test="${sessionScope.role==2}">
    <script>
        alert("你没有权限访问该页面")
    </script>
</c:if>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台仪表盘 - 新闻管理系统</title>
    <link rel="stylesheet" href="../../resources/css/admin-style.css">
</head>
<body class="admin-body">
<!-- 侧边栏导航 -->
<aside class="admin-sidebar">
    <div class="sidebar-header">
        <h2>新闻管理系统</h2>
    </div>
    <nav class="sidebar-nav">
        <a href="<c:url value="/dashboard"/>" class="nav-item active">仪表盘</a>
        <a href="<c:url value="/list/news"/>" class="nav-item">新闻管理</a>
        <a href="<c:url value="/list/category"/>" class="nav-item">类型管理</a>
        <c:if test="${sessionScope.role!=3}">
            <a href="<c:url value="/list/user"/>" class="nav-item">用户管理</a>
        </c:if>
        <a href="<c:url value="/list/comm"/>" class="nav-item">评论管理</a>
        <a href="<c:url value="/logout"/>" class="nav-item logout-item">退出登录</a>
    </nav>
</aside>

<!-- 主内容区 -->
<main class="admin-main">
    <!-- 顶部导航 -->
    <header class="admin-header">
        <h1>系统仪表盘</h1>
        <div class="user-info">
            <c:if test="${sessionScope.role!=3}">
                <span>管理员：<%=session.getAttribute("user")%></span></c:if>
            <c:if test="${sessionScope.role==3}">
                <span>编辑：<%=session.getAttribute("user")%></span></c:if>
        </div>
    </header>

    <!-- 数据统计卡片 -->
    <section class="stats-cards">
        <div class="stat-card">
            <div class="stat-title">已发布新闻总数</div>
            <div class="stat-value" id="total-news"></div>
            <div class="stat-desc">较上月 <span id="air-news">+12%</span></div>
        </div>
        <div class="stat-card">
            <div class="stat-title">分类数量</div>
            <div class="stat-value" id="total-types">0</div>
        </div>
        <div class="stat-card">
            <div class="stat-title">用户总数</div>
            <div class="stat-value" id="total-users">0</div>
            <div class="stat-desc">较上月 <span class="text-green" id="air-users">+8%</span></div>
        </div>
        <div class="stat-card">
            <div class="stat-title">评论总数</div>
            <div class="stat-value" id="total-comments">0</div>
            <div class="stat-desc">较上月 <span class="text-red" id="air-comments">-3%</span></div>
        </div>
    </section>

    <!-- 近期新闻列表 -->
    <section class="recent-news">
        <div class="section-header">
            <h2>近期发布新闻</h2>
            <a href="/list/news" class="view-all">查看全部 →</a>
        </div>
        <table class="news-table" id="recent-news-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>分类</th>
                <th>发布时间</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody>
            <!-- JS动态渲染 -->
            <c:forEach items="${newsList}" var="item">
                <tr>
                    <td>${newsList.indexOf(item)+1}</td>
                    <td>${item.title}</td>
                    <td>${item.category}</td>
                    <td>${item.air_time}</td>
                    <td>
                        <c:if test="${item.status == 1}">已发布</c:if>
                        <c:if test="${item.status == 0}">草稿</c:if>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </section>
</main>
<script src="../../resources/js/jquery-3.7.1.min.js"></script>
<script>
    function formatData(data,$selector) {
        if(data>0) {
            $selector.addClass('text-green');
        }else{
            $selector.addClass('text-red');
        }
    }
    $(document).ready(function () {
        $.get('/dashboard/news/count', function (data) {
            $('#total-news').text(data);
        });
    });

    $(document).ready(function () {
        $.get('/dashboard/category/count', function (data) {
            $('#total-types').text(data);
        });
    });

    $(document).ready(function () {
        $.get('/dashboard/news/percent',function (data){
            var $airNews = $('#air-news');
            $airNews.html((data>0?'+':'')+data+'%');
            formatData(data,$airNews);
        });
    });

    $(document).ready(function () {
        $.get('/dashboard/users/count', function (data) {
            $totalUsers = $('#total-users');
            $totalUsers.text(data);
        });
    });

    $(document).ready(function () {
        $.get('/dashboard/users/percent', function (data) {
            var $airUsers = $('#air-users');
            $airUsers.html((data>0?'+':'')+data+'%');
            formatData(data,$airUsers);
        });
    });

    $(document).ready(function () {
        $.get('/dashboard/comments/count', function (data) {
            $('#total-comments').text(data);
        });
    });

    $(document).ready(function () {
        $.get('/dashboard/comments/percent', function (data) {
            $airComments = $('#air-comments');
            $airComments.html(data>0?'+':''+data+'%');
            formatData(data,$airComments);
        });
    });
</script>
</body>
</html>